<template>
  <div class="ptp-view">
    <div class="audit-view">
      <div class="operate-board">
        <LeftOperatePtp
          :plan-id="planId"
          :local-config="localConfig"
          @select-res="ptpSelect"
        />
      </div>
      <div class="map">
        <PtpShowview
          :res-id="device_id"
          :res-type="device_type"
          :local-config="localConfig"
          :plan-id="planId"
        />
      </div>
    </div>
  </div>
</template>

<script>
import LeftOperatePtp from './components/LeftOperatePtp.vue';
import PtpShowview from './components/PtpShowview.vue';

export default {
  name: 'PtpView',
  components: {
    LeftOperatePtp,
    PtpShowview,
  },
  props: {
    planId: {
      type: String,
      default: '',
    },
    localConfig: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 选择的光交箱id
      device_id: '',
      device_type: '',
    };
  },
  methods: {
    // 选择光设备
    ptpSelect(id, type) {
      this.device_type = type;
      this.device_id = id;
    },
  },
};
</script>

<style lang="scss" scoped>
  .ptp-view {
    height: 100%;
    .audit-view{
      width: 100%;
      height: calc(100vh - 44px);
      display: flex;
      .operate-board{
        width: 300px;
        height: 100%;
      }
      .map{
        width: calc(100% - 300px);
        height: 100%;
      }
    }
  }
</style>
